<template>
  <div class="about">
    <div class="box">
        <el-button type="primary" link @click="$router.go(-1)">返回地址列表</el-button>
        <el-form :model="form" label-width="120px">
            <el-form-item label="收货人">
              <el-input v-model="form.name" />
            </el-form-item>
            <el-form-item label="手机号码">
              <el-input v-model="form.tel" />
            </el-form-item>
            <el-form-item label="选择地区">
              <el-input v-model="form.area" />
            </el-form-item>
            <el-form-item label="地址">
              <el-input v-model="form.address" />
            </el-form-item>
             <el-form-item>
                <el-button type="primary" @click="onSubmit">添加地址</el-button>
               
                </el-form-item>
        </el-form>
    </div>
  </div>
</template>
<script>
import {reactive,toRefs} from 'vue'
import {useStore} from 'vuex'
import {useRouter, useRoute} from 'vue-router'
export default {
    setup(props) {
        const data = reactive({
            form:{
                name:'',
                tel:'',
                area:'',
                address:''
            }
        })
        const {commit} = useStore()
        const {push} = useRouter()
        const route = useRoute()
        // 把item，index从route.query解构出来
        const {item,index} = route.query
        // 判断  如果是修改  判断可以通过item，或者index，如果是添加 没有路由传参所以获取不到item和index
        if(index){
                data.form = JSON.parse(item)
        }

        const onSubmit = ()=>{
            // 判断  如果是修改  判断可以通过item，或者index，如果是添加 没有路由传参所以获取不到item和index
            if(index){
                // 修改
                commit('edit',{index,form:data.form})
                alert('修改成功')
                 push('/')
            }else{
                // 添加
                commit('add',data.form)
                alert('添加成功')
                push('/')
            }
            

        }
        return {...toRefs(data),onSubmit}
    }
}
</script>
<style lang="scss" scoped>
.box{
    width:1000px;
    margin: 50px auto;
    border: 1px solid #c00;
    padding: 30px;
}
</style>

